<template>
  <div class="general-row">
    <div
      v-for="(colKeys, colIndex) in groupedColumns"
      :key="colIndex"
      class="column-group"
      
    >
      <div
        v-for="(key, idx) in colKeys"
        :key="idx"
        class="column"
        :style="{ width: columnWidth + 'px'}"
        :class="{ 's-column': colIndex % 2 == 0 }"
      >
        {{ getValue(key) }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GeneralRow",
  props: {
    source: Object, // 数据源
    showStyle: Array, // 每列展示的元素个数（数组值表示每列展示的元素个数）
    showKeys: Array // 所有可选的键
  },
  data() {
    return {
      screenWidth: window.innerWidth // 初始化屏幕宽度
    };
  },
  computed: {
    columnCount() {
      return this.showStyle.length; // 总列数
    },
    columnWidth() {
      const minColumnWidth = this.screenWidth / 4; // 每列最小宽度为屏幕宽度的四分之一
      return Math.max(this.screenWidth / this.columnCount, minColumnWidth); // 每列宽度取计算值与最小宽度的较大值
    },
    groupedColumns() {
      const result = [];
      let startIndex = 0;
      // 遍历 showStyle，根据每列展示的数量分割 showKeys
      this.showStyle.forEach((count, colIndex) => {
        const columnElementNumber = parseInt(count); // 当前列的元素个数
        const colKeys = this.showKeys.slice(startIndex, startIndex + columnElementNumber); // 当前列的键
        result.push(colKeys);
        startIndex += columnElementNumber; // 更新起始索引
      });
      return result;
    }
  },
  mounted() {
    window.addEventListener("resize", this.updateScreenWidth);
    this.updateScreenWidth();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateScreenWidth);
  },
  methods: {
    updateScreenWidth() {
      this.screenWidth = window.innerWidth;
    },
    getValue(key) {
      return this.source[key] || ""; // 从 source 中获取对应的值
    }
  }
};
</script>
<style scoped>
/* stylelint-disable */

.general-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #ddd;
  overflow-x: auto; /* 保留横向滚动功能 */
}
.general-row::-webkit-scrollbar {
  display: none; /* 隐藏滚动条（适用于 Chrome、Safari 和 Edge） */
}


.column-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.column {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 0;
  flex-shrink: 0; /* 防止列宽被压缩 */
}

.column-group:first-child {
  position: sticky; /* 固定第一列 */
  left: 0; /* 固定在容器最左边 */
  z-index: 1; /* 确保第一列在其他列之上 */
  background-color: white; /* 设置背景色，避免内容重叠 */
}

.s-column {
  background-color: lightblue;
}
</style>